<!DOCTYPE html>
<html>
<head>
	<title>kthoom Comic Reader</title>
	<link rel="stylesheet" href="kthoom.css" type="text/css"/>
	<link rel="icon" type="image/png" href="images/logo.png"/>
	<script type="application/javascript" src="kthoom.js"></script>
</head>
<body onload="init()">
<div class="background"> <!-- i keep accidnetlally clickign on it-->
  <object id="logo" type="image/svg+xml" data="images/logo.svg" width="100%">kthoom logo</object>
</div>
<div class="foreground">
	
	<span id="uploader"></span>
	
	<div id="progress" class="hide"></div>
	
	<div id="nav" class="hide">
		<button id="prev" title="Previous Page (Left Arrow)" type="button" onclick="showPrevPage()">&lt;&lt;</button>
		<!--<span id="pageCounter">Page X/Y</span>-->
		<button id="next" title="Next Page (Right Arrow)" type="button" onclick="showNextPage()">&gt;&gt;</button>
		<!--<img id="close" title="Close Book (X)" onclick="closeBook()" src="images/cancel.png" tabIndex="3"/>-->
	</div>
	
	<!-- eventually will replace this with a canvas element -->
	<div id="mainContent">
	  <div id="mainText" style="display:none"></div>
  	<canvas id="mainImage"></canvas>
	</div>
</div>
</body>
</html>
